<template>
  <div style="display: flex;flex-direction: column;" class="container ">
    <div style="width: 100%;position: relative;margin-bottom: 0.2rem;" class="flex-c-s">
      <div class="allBox"> <el-date-picker v-model="timeData" @change="timeChange"
          style="width: 100%;height: 100%;opacity: 1;position: absolute;left:0;top:0;" class="timeBox"
          type="datetimerange" start-placeholder="Start" end-placeholder="End " :default-time="defaultTime" />
      </div>
      <div class="allBox">
        <el-select v-model="cardName" @change="cardChange" placeholder="Select"
          style="width: 100%;height: 100%;position: absolute;top:0;left:0;opacity: 0;" value-key="code" size="large">
          <el-option v-for="item in cardOptions" :key="item.code" :label="item.name" :value="item.code" />
        </el-select>
        {{ cardName }}
        <img class="down" src="../../../assets/down.png" alt="">
      </div>
      <div class="allBox">
        <el-select v-model="statusName" @change="statusChange" placeholder="Select"
          style="width: 100%;height: 100%;position: absolute;top:0;left:0;opacity: 0;" value-key="code" size="large">
          <el-option v-for="item in statusOptions" :key="item.code" :label="item.name" :value="item.name" />
        </el-select>
        {{ statusName }}
        <img class="down" src="../../../assets/down.png" alt="">
      </div>
      <div class="searchBox">
        <el-input v-model="params.keyword" @change="inputChange('keyword')" @clear="keywordClear('keyword')" clearable
          placeholder="Order ID / Seller Nickname">
          <template #append><el-icon>
              <Search class="hover" />
            </el-icon></template> </el-input>
      </div>
      <div class="searchBox">
        <el-input v-model="params.merchNo" @change="inputChange('merchNo')" @clear="keywordClear('merchNo')" clearable
          placeholder="MerchNo">
          <template #append><el-icon>
              <Search class="hover" />
            </el-icon></template> </el-input>
      </div>
      <div style="padding-left: 0.08rem;" class="allBox section">
        <el-input v-model="params.minPoints" @change="pointSection()" @clear="params.minPoints=''" clearable
          placeholder="minPoints"></el-input>
        -
        <el-input v-model="params.maxPoints" @change="pointSection()" @clear="params.maxPoints=''" clearable
          placeholder="maxPoints"></el-input>
      </div>
    </div>
    <div class="tabelBox">
      <el-table :header-cell-style="headerCellStyle" :cell-style="cellStyle" border="true" height="100%"
        :data="tableData" style="width: 100%">
        <el-table-column fixed label="Created Time" prop="updateTime" width="170">
          <template #default="scope">
            <div>
              {{ dateFormater(scope.row.createTime,true)}}
            </div>
          </template>
        </el-table-column>
        <el-table-column fixed label="Order Number" prop="orderNo" width="200">
        </el-table-column>
        <el-table-column label="Bank" prop="bankName" width="150">
        </el-table-column>
        <el-table-column label="Bank No" prop="bankAccount" width="150" />
        <el-table-column label="Receiver Name" prop="receiverName" width="200" />
        <el-table-column label="Order Amount(NGN)" prop="amount" width="150" />
        <el-table-column label="Seller" prop="sellerNickname" width="200" />
        <el-table-column label="ID" prop="userId" width="150" />
        <el-table-column label="Order Points" prop="points" width="200" />
        <el-table-column label="Rate(%)" prop="rate" width="150" />
        <!-- <el-table-column label="Settle Amount(NGN)" prop="finalAmount" width="200" /> -->

        <el-table-column label="Status" prop="status" width="150">
          <template #default="scope">
            <div>
              {{ getStatus(scope.row.status).text}}
            </div>
          </template>
        </el-table-column>

        <el-table-column label="Service Provider" prop="buyerName" width="150" />

        <el-table-column fixed="right" width="150" label="Oprate" prop="">
          <template #default="scope">
            <div class="flex-c-c">
              <div @click="toDetail(scope)" style="margin-left: 0.2rem;" class="disable hover">
                Detail
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="width: 100%;height: 1rem;" class="flex-c-e">
      <el-pagination style="margin-right: 2.18rem;margin:0.14rem  0; " v-model:current-page="params.page"
        v-model:page-size="params.pageSize" background="#4180F7" layout="total , prev, pager, next, jumper" :total="total"
        @current-change="handleCurrentChange" />
    </div>
  </div>

</template>


<script setup>
  import { ref, reactive, onMounted } from 'vue'
  import { useRouter } from 'vue-router'
  import { pointsPage, orderDetail, adList } from '@/api/order.js'
  import { preview } from 'v-preview-image'
  import { ElMessage } from 'element-plus'
  import { dateFormater } from '@/utils/dateFormater'
  const router = useRouter()

  onMounted(() => {
    getData()
    getCardList()
  })
  const total = ref(0)

  const params = reactive({
    page: 1,
    pageSize: 10,
    keyword: '',
    status: [],
    merchNo: '',
    startTime: '',
    endTime: '',
    minPoints: '',
    maxPoints: ''
  })

  // 时间区间
  const timeData = ref('')
  const defaultTime = ref([
    new Date(2000, 1, 1, 0, 0, 0),
    new Date(2000, 2, 1, 23, 59, 59),
  ])
  const timeChange = (e) => {
    console.log(e)
    if (e) {
      params.startTime = dateFormater(e[0], true, true)
      params.endTime = dateFormater(e[1], true, true)
    } else {
      params.startTime = ''
      params.endTime = ''
    }
    params.page = 1
    getData()

  }
  //cardChange
  const cardName = ref('All Gift Card')
  const cardOptions = ref([])
  const getCardList = async () => {
    const res = await adList()
    cardOptions.value = [{ name: "All Gift Card", code: '' }, ...res.data]
  }
  const cardChange = (e) => {
    cardName.value = e ? e : "All Gift Card"
    console.log(e, 999)
    params.page = 1
    params.advCode = e
    getData()
  }
  // statusChange
  const statusName = ref('All Status')
  const statusChange = (e) => {
    let data = statusOptions.value.find(item => {
      return item.code == e
    })
    let obj = statusOptions.value.find(item => item.name == e)
    params.status = [obj.code]
    params.page = 1
    getData()
  }
  const statusOptions = ref([
    {
      name: 'All Status',
      code: ''
    },
    {
      name: 'trade',
      code: 11
    }, {
      name: 'Complete',
      code: 42,
    }, {
      name: 'Cancel',
      code: 41,
    }, {
      name: 'Buyer Paid',
      code: 12,
    }, {
      name: 'Negotiation',
      code: 20,
    }, {
      name: 'Dispute',
      code: 30,
    }
  ])

  const pointSection = () => {
    let flag = (params.minPoints || params.minPoints === '0') && params.maxPoints && params.maxPoints >= params.minPoints
    if (flag || (!params.minPoints && !params.maxPoints)) {
      params.page = 1
      getData()
    }
  }
  // keyword change
  const inputChange = (e) => {

    params[e] = params[e].replace(/\s+/g, '')
    if (!params[e]) return
    params.page = 1
    getData()

  }
  const keywordClear = (e) => {
    params[e] = ''
    params.page = 1
    getData()
  }
  const tableData = ref([
  ])
  const handleCurrentChange = (e) => {
    params.page = e
    getData()

  }
  const getData = async () => {
    const res = await pointsPage(params)
    tableData.value = res.data.records
    total.value = res.data.total
  }




  const toDetail = async (data) => {
    router.push({
      path: '/pointOrder/detail',
      query: {
        orderNo: data.row.orderNo
      }
    })
  }
  const getStatus = (e) => {
    if (e == 11) return {
      background: '#2BD6D6',
      text: 'trade'
    }
    if (e == 42) return {
      background: '#506CFF',
      text: 'Complete'
    }
    if (e == 41) return {
      background: '#B1B9E1',
      text: 'Cancel'
    }
    if (e == 12) return {
      background: '#9CC135',
      text: 'buyer paid'
    }
    if (e == 20) return {
      background: '#F4BC50',
      text: 'Negotiation'
    }
    if (e == 30) return {
      background: '#FF63A5',
      text: 'Dispute'
    }
  }


  const onPredivImage = (index, arr) => {
    preview(index, arr)
  }
  const headerCellStyle = reactive({
    'background': '#E1ECFF',
    'text-align': 'center',
    'color': '#666',
    'font-family': 'avenir500',
    'font-size': '0.16rem',
    'font-weight': '500',
    'height': '0.6rem',
    'box-sizing': 'border-box'
  })
  const cellStyle = reactive({
    'text-align': 'center',
    'color': '#666',
    'font-family': 'avenir500',
    'font-size': '0.16rem',
    'font-weight': '500',
    'height': '0.6rem',
    'box-sizing': 'border-box'
  })
</script>



<style lang="less" scoped>
  .container {
    height: 100%;

    .allBox {
      width: 1.93rem;
      height: 0.4rem;
      margin-right: 0.2rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      overflow: hidden;
      position: relative;
      color: #2E3034;
      font-family: ff400;
      font-size: 0.14rem;
      font-weight: 400;
      background: #fff;
      border-radius: 0.08rem;
      box-shadow: 0rem 0.02rem 0.05rem rgba(0, 0, 0, .3);
      padding-left: 0.2rem;
      padding-right: 0.08rem;
      box-sizing: border-box;

      .down {
        width: 0.08rem;
        height: 0.08rem;
      }
    }

    .searchBox {
      width: 2.5rem;
      display: flex;
      height: 0.4rem;
      background: #fff;
      border-radius: 0.08rem;
      box-shadow: 0rem 0.02rem 0.05rem rgba(0, 0, 0, .3);
      margin-right: 0.2rem;
    }


    .tabelBox {
      /* height: calc(100% - 1.48rem); */
      overflow: hidden;
      overflow-y: auto;
    }
  }
</style>


<style lang="less">
  .allBox,
  .transAmountBox {
    .el-date-editor .el-range__icon {
      display: none;
    }

    .el-range-editor.el-input__wrapper {
      padding: 0 !important;
      padding-left: 0.02rem !important;
    }

    .el-range-editor--small .el-range-input {
      font-size: 0.1rem !important;
    }

    .el-date-editor .el-range-separator {
      padding: 0 !important;
      /* align-items: normal !important; */
      /* width: 0.02rem !important; */
      flex: 0.5 !important;
    }
  }

  .section {
    .el-input__wrapper {
      box-shadow: none !important;
    }

    .el-input__inner:hover {
      cursor: pointer;
    }

    .el-input__wrapper .is-focus {
      box-shadow: none !important;
    }

  }

  .el-range-input {
    cursor: pointer;
  }
</style>